<template>
  <div class="new-voucher">
    <RouteTitle isBack />
    <div class="content">
      <a-row justify="space-between" align="middle">
        <a-col>充值选项：</a-col>
      </a-row>
      <a-row align="middle" class="recharge-type">
        <a-col
          class="recharge-item"
          v-for="item in packageList"
          :key="item.id"
          @click="rechargeSelectClick(item)"
          :class="rechargeSelect == item.id ? 'recharge-bg' : ''"
        >
          <div class="item-text">
            <div class="text">{{ item.point_number }}{{ unitName }}</div>

            <div class="amount">{{ item.price }}</div>
            <div class="give-num">
              赠{{ item.give_point_number }}{{ unitName }}
            </div>
          </div>
          <div :class="rechargeSelect == item.id ? 'checked' : ''">
            <CheckOutlined
              class="icon-checked"
              :rotate="300"
              v-if="rechargeSelect == item.id"
            />
          </div>
        </a-col>
      </a-row>
      <a-tooltip v-if="!allowBtn&&disbledTxt">
        <template #title>{{ disbledTxt }}</template>
        <a-button
        type="primary"
        style="margin-top: 10px; border-radius: 5px"
       
        :disabled="isDisabled"
        :loading="loading"
        >确认充值</a-button
       >
      </a-tooltip>
      <a-button
      v-else
        type="primary"
        style="margin-top: 10px; border-radius: 5px"
        @click="handleRecharge"
        :disabled="isDisabled"
        :loading="loading"
        >确认充值</a-button
      >
    </div>
    <memberShip   
    :rechargeData="rechargeData"
    :visible="showMemberShip"
    @close="handleClose">

    </memberShip>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
import { message } from "ant-design-vue";
import request from "@/common/utils/request";
import {  useRouter } from "vue-router";
import memberShip from "@/views/socialMedia/PersonalCenter/modules/memberShip.vue";
import store from "@/store";
import {
  SearchOutlined,
  CheckOutlined,
  LineOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";

const router = useRouter();
let packageList = ref([]);
let unitName = ref("");
let rechargeSelect = ref("");
let allowBtn = ref(true);
let loading = ref(false);
let rechargeData = ref({})
let showMemberShip = ref(false)
let disbledTxt = ref('')
const isDisabled = computed(() => {
  return !rechargeSelect.value || !allowBtn.value || packageList.length == 0
})
const getPackageList = () => {
  request
    .get("/work_ai", "/user/socialMedia/pointCoinPackage/get")
    .then((res) => {
      unitName.value = res.alias;
      packageList.value = res.list;
      if(packageList.value.length > 0){
        rechargeSelectClick(packageList.value[0])
      }
      allowBtn.value = res.prompt.status
      disbledTxt.value = res.prompt.msg
    });
};
getPackageList();
const rechargeSelectClick = (item) => {
  rechargeSelect.value = item.id;
  Object.assign(rechargeData.value, {
        option: {
            ...item,
            money: item.price
        }
    });
};
const handleRecharge = async () => {
  const villageInfo = await store.dispatch("GetVillageInfo");

    let params = {
      id: rechargeSelect.value,
      village_id: villageInfo ? villageInfo.id : 0,
    }
    loading.value = true
    request
    .post("/work_ai", "/user/socialMedia/pointCoinPackage/pay", params)
    .then((res) => {
        loading.value = false;
        console.log(res);
        
        if (res?.result?.pay_status === "success") {
            router.push({ name: "MediaBusinessRecord" });
            message.success("操作成功");
            return;
        }
        if (res?.result?.pay_status === "loading") {
            showMemberShip.value = true;
            rechargeData.value.payUrl = res?.result?.pay_url;
        }
    })
    .catch(() => {
      loading.value = false;
    });
}
const handleClose = ()=>{
    showMemberShip.value = false
}
</script>
<style lang="less" scoped>
.new-voucher {
  .content {
    margin-top: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.4);
    padding: 24px;
    .recharge-type {
      margin: 10px 0;
      .recharge-item {
        margin-right: 16px;
        margin-bottom: 16px;
        padding-top: 20px;
        cursor: pointer;
        overflow: hidden;

        border-radius: 10px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rgb(229, 231, 235);

        .item-text {
          width: 300px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 30px;
          font-weight: 700;
          text-align: center;
          .text {
            font-size: 16px;
          }
          .give-num {
            font-size: 14px;
            background-color: var(--ss-primary-color);
            color: #fff;
            align-self: flex-end;
            padding: 5px 10px;
            border-top-left-radius: 10px;
          }
          .amount {
            color: var(--ss-primary-color);
            font-size: 30px;
          }
          .amount::before {
            content: "￥";
            font-size: 18px;
          }
        }

        .checked {
          position: relative;
          width: 40px;
          height: 65px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-right: 20px;
          color: #fff;
          font-size: 18px;
          position: absolute;
          top: -29px;
          left: -13px;
          transform: rotate(53deg);
          background: var(--ss-primary-color);
          .icon-checked {
            position: absolute;
            bottom: 23px;
            right: 0px;
            transform: rotate(15deg);
          }
        }

        &.recharge-bg {
          border: 1px solid var(--ss-primary-color);
        }

        #inputNumber {
          margin-top: 5px;
          text-align: center;
          border: none;
        }
        .input-text {
          transition: all 0.3s;
          color: var(--ss-primary-color);
        }
      }
    }

    .purchase-quantity {
      margin: 10px 0;
    }
    .voucher-number {
      display: flex;
      .voucher-item {
        width: 220px;
        height: 100px;
        margin-right: 16px;
        margin-bottom: 16px;
        cursor: pointer;
        overflow: hidden;
        padding: 16px;
        border-radius: 10px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rgb(229, 231, 235);
        font-size: 26px;
        font-weight: 700;
        &.voucher-border {
          border: 1px solid var(--ss-primary-color);
        }
        .checked {
          width: 40px;
          height: 65px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-right: 20px;
          color: #fff;
          font-size: 18px;
          position: absolute;
          bottom: -29px;
          right: -13px;
          transform: rotate(53deg);
          background: var(--ss-primary-color);
        }
      }

      .minus {
        width: 37px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid rgb(224, 224, 230);
        &:hover {
          color: var(--ss-primary-color);
          cursor: pointer;
        }
      }
      .add {
        width: 37px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: 1px solid rgb(224, 224, 230);
        &:hover {
          color: var(--ss-primary-color);
          cursor: pointer;
        }
      }
    }

    .period-validity {
      .validity-list {
        .item {
          height: 40px;
          border: 1px solid rgb(224, 224, 230);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s;
          padding: 0 20px;
          &.item-broder {
            color: var(--ss-primary-color);
            border: 1px solid var(--ss-primary-color);
          }
          &:hover {
            color: var(--ss-primary-color);
          }
        }
      }
    }
  }
  :deep(.ant-input-number-input) {
    text-align: center;
  }
}
</style>
